<!DOCTYPE html>
<html>

<head>
    <title>飞天喵</title>
    <link href='/favicon.ico' rel='shortcut icon'>
    <link href="/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type='text/css'>
    <link href="/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script src="/jquery/3.3.1/jquery.js"></script>
    <script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script src="/moment.js/2.24.0/moment-with-locales.js"></script>
    <script src="/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js" crossorigin="anonymous"></script>
</head>
<script>
    $(function () {

        var picker1 = $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn')
        });
        var picker2 = $('#datetimepicker2').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn')
        });

        var start = moment().format('YYYY-MM-01');
        var end = moment().format('YYYY-MM-DD');

        $('#datetimepicker1Txt').val(start)
        picker1.data().date = start
        $('#datetimepicker2Txt').val(end)
        picker2.data().date = end

        $("#searchBtn").click(function () {

            if (picker1.data().date == undefined) {
                alert("开始时间不能为空")
                return;
            }

            if (picker2.data().date == undefined) {
                alert("结束时间不能为空")
                return;
            }


            if (picker1.data().date > picker2.data().date) {
                alert("结束时间不能大于开始时间！")
                return;
            }

            if ($('#authorization').val() == '') {
                $('#authorization').focus();
                alert("授权码不能为空")
                return;
            }

            $.post("/user/query",
                {
                    sdate: picker1.data().date,
                    edate: picker2.data().date,
                    authorization: $('#authorization').val()
                },
                function (data, status) {
                    if (status == 'success') {
                        if (data.code == '0000') {
                            $("#template1").empty("")
                            $.each(data.data.deliveryOrders, function (i, n) {
                                var tbBody = "";
                                // 浅红 ca6969
                                // 浅绿 6fd674
                                if (n.orderStateNew == '99') {
                                    tbBody += `<tr style='background-color:#ca6969'>`
                                } else if (n.orderType == 'asOrder') {
                                    tbBody += `<tr style='background-color:#e7e55a'>`
                                } else {
                                    tbBody += `<tr>`
                                }

                                tbBody += `<td>${i + 1}</td>
                                <td>${n.createTime} - ${n.updateTime}</td>
                                
                                <td>${n.orderStateZn}</td>
                                <td>${n.shopName}</td>
                                <td>${n.driverName}</td>
                                <td>${n.whName}</td>
                                <td>${n.carrierName}</td>
                                <td>${n.orderTypeZn}</td>
                                <td>${n.idealFee}</td></tr>`;


                                $("#template1").append(tbBody);

                            });
                            var tbBody1 = '';
                            tbBody1 += `<tr class="active" style='border-bottom:1px solid #ddd;'>
                                    <td colspan="8">合计</td>
                                    <td>${data.data.countFee}</td>
                                </tr>`
                            $("#template1").append(tbBody1);


                            $("#template2").empty("");
                            var v1 = Number(0);
                            var v2 = Number(0);
                            var v3 = Number(0);
                            var v4 = Number(0);
                            $.each(data.data.deliveryGroupCountFee, function (i, n) {
                                var tbBody2 = '';
                                tbBody2 += `<tr>
                                    <td>${i + 1}</td>
                                    <td>${n.driverName}</td>
                                    <td>${n.driverPhone}</td>
                                    <td>${n.driverNumber}</td>
                                    <td>${n.driverOutNumber}</td>
                                    <td>${n.driverLoseNumber}</td>
                                    <td>${n.idealFee}</td>
                                </tr>`

                                $("#template2").append(tbBody2);

                                // 计算总数
                                v1 = Number(v1) + Number(n.driverNumber);
                                v2 = Number(v2) + Number(n.driverOutNumber);
                                v3 = Number(v3) + Number(n.driverLoseNumber);
                                v4 = Number(v4) + Number(n.idealFee);
                            });

                            var tbBody3 = '';
                            tbBody3 += `<tr class="active" style='border-bottom:1px solid #ddd;'>
                                    <td colspan="3">合计</td>
                                    <td>${v1}</td>
                                    <td>${v2}</td>
                                    <td>${v3}</td>
                                    <td>${v4}</td>
                                </tr>`
                            $("#template2").append(tbBody3);
                        } else {
                            alert(`查询失败:${data.info}`)
                        }

                    }
                });
        });
    });





</script>

<body>
    <a id='back' href="/user/"> ＜返回 </a>
    <br>
    飞天喵 - 保卫世界和平
    <br>

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="panel panel-danger">
                <!--panel-heading-->
                <div class="panel-heading">
                    <!--panel-title-->
                    <h3 class="panel-title">测试</h3>
                </div>
                <!--panel-body-->
                <div class="panel-body">
                    <form method="post" action="/qu" class="form-inline">
                        <!--指定 date标记-->
                        <div class='input-group date' id='datetimepicker1'>
                            <input id='datetimepicker1Txt' type='text' class="form-control" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                        <!--指定 date标记-->
                        <div class='input-group date' id='datetimepicker2'>
                            <input id='datetimepicker2Txt' type='text' class="form-control" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                        <button id="searchBtn" type="button" class="btn btn-info">搜索</button>
                    </form>
                    Authorization(授权码缺勿乱输入):
                    <input type='text' class="form-control" id="authorization" value='' />
                </div>

                <div class="table-responsive">
                    <table id="datas2"
                        class="table table-striped table-bordered table-hover table-condensed text-center">
                        <thead>
                            <tr class="success">
                                <th class="text-center">#</th>
                                <th class="text-center">骑手名称</th>
                                <th class="text-center">骑手电话</th>
                                <th class="text-center">总 次 数</th>
                                <th class="text-center">总退货数</th>
                                <th class="text-center">总取消数</th>
                                <th class="text-center">总 费 用</th>
                            </tr>
                        </thead>
                        <tbody id="template2">
                        </tbody>
                    </table>
                </div>

                <hr style='border:1px solid #eccccc;'>

                <div class="table-responsive">
                    <table id="datas1"
                        class="table table-striped table-bordered table-hover table-condensed text-center">
                        <thead>
                            <tr class="success">
                                <th class="text-center">#</th>
                                <th class="text-center">配送时间</th>
                                <th class="text-center">订单状态</th>
                                <th class="text-center">收件名称</th>
                                <th class="text-center">骑手名称</th>
                                <th class="text-center">发件名称</th>
                                <th class="text-center">配送名称</th>
                                <th class="text-center">订单类型</th>
                                <th class="text-center">费 用</th>
                            </tr>
                        </thead>

                        <tbody id="template1">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <body>

</html>